<template>
    <div class="list">
        <div class="top">
            <div class="t-right flex-between">
                <h3>{{title}}</h3>
                <div class="t-money flex-between">
                    <div class="money flex-between">
                        <div class="m_box flex-center">
                            <span>{{min_money}}</span>
                            <p>已筹金额(元)</p>
                        </div>
                        <div class="m-line"></div>
                        <div class="m_box flex-center">
                            <span>{{max_money}}</span>
                            <p>目标金额(元)</p>
                        </div>
                    </div>
                    <div class="help-btn flex-center" @click="goHelp" v-if="id">
                        <span v-if="again">继续帮助</span>
                        <span v-else>立即帮助</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="bottom flex-between">
            <div class="flex">
                <img :src="avater" alt="">
                <span :class="{'give':score > -1}">{{name}}</span>
            </div>
            <div class="score" v-show="score >=0"><i class="iconfont iconicon3"></i>已捐献<span>{{score}}</span>积分</div>
            <div class="date" v-if="score <0">{{date}}</div>
            <div class="date" v-if="score >=0">{{date |date}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "list",
        props:{
            "again":Number,
            "id":Number,
            "uid":Number,
            "imgurl":String,
            "title":String,
            "min_money":String,
            "max_money":String,
            "avater":String,
            "name":String,
            "date":String,
            'score':{
                default:-1
            }
        },
        methods:{
            goHelp(){
                this.$login(()=>{
                    this.$router.push({
                        path:'/help?id='+this.id+'&uid='+this.uid
                    })
                })
            },
        },
        filters: {
            date:function (value) {
                return value.split(':')[0] + ":" + value.split(':')[1]
            }
        }
    }
</script>

<style scoped lang="less">
    .list{
        padding-top: 44px;
    }
    .top{
        img{
            width: 176px;
            height: 176px;
            border-radius: 5px;
            object-fit: cover;
        }
        .t-right{
            flex-direction: column;
            h3{
                width: 100%;
                font-size: 30px;
                color: #333333;
                text-decoration: none;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 15px;
            }
            .t-money{
                width: 100%;
                .help-btn{
                    font-size: 28px;
                    background: #185fff;
                    color:white;
                    width: 160px;
                    height: 50px;
                    border-radius: 25px;
                }
            }

            .money{
                width: 490px;
                height: 120px;
                background-color: #f9f9f9;
                border-radius: 10px;
                padding: 0 22px;
                box-sizing: border-box;
                .m_box{
                    flex-direction: column;
                    span{
                        font-size: 30px;
                        color: #185fff;
                        font-weight: bold;
                    }
                    p{
                        font-size: 26px;
                        color: #666666;
                    }
                }
                .m-line{
                    width: 112px;
                    height: 4px;
                    background-color: #ddd;
                    border-radius: 2px;
                    position: relative;
                    &::after{
                        content:"";
                        display: inline-block;
                        width: 4px;
                        height:20px;
                        background-color: #ddd;
                        position: absolute;
                        right:5px;
                        bottom:-2px;
                        transform: rotateZ(-45deg);
                    }
                }
            }
        }
    }
    .bottom{
        padding: 24px 0;
        img{
            width: 56px;
            height: 56px;
            border-radius: 50%;
            object-fit: cover;
        }
        .flex span{
            font-size: 26px;
            color: #999999;
            margin-left: 15px;
        }
        .give{
            width: 80px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .date{
            font-size: 26px;
            color: #999999;
        }
        .give1{
            width:220px;
            overflow: hidden;
            white-space: nowrap;
        }
        .score{
            font-size: 26px;
            color: #999999;
            i{
                color:#185fff;
            }
            span{
                color:#185fff;
            }
        }
    }
</style>
